import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:jetour_line/base_widget/dash_line.dart';
import 'package:jetour_line/base_widget/sliver_list_widget.dart';
import 'package:jetour_line/my_colors.dart';
import 'package:jetour_line/utils/extension_int.dart';

import '../../../base_widget/base_image.dart';
import '../../../base_widget/image_network_widget.dart';
import '../../../base_widget/my_alert.dart';
import '../../../map/map_utils.dart';
import '../../../models/common_detail_model.dart';
import '../../../utils/page_push_utils.dart';
import '../../line/lineDetail/line_detali_image_page.dart';

class CommonDetailListWidget extends StatefulWidget {
  final CommonDetailModel detailModel;

  const CommonDetailListWidget({Key? key, required this.detailModel})
      : super(key: key);

  @override
  State<CommonDetailListWidget> createState() => _CommonDetailListWidgetState();
}

class _CommonDetailListWidgetState extends State<CommonDetailListWidget> {
  int showGroupIndex = 0;

  @override
  Widget build(BuildContext context) {
    int length = widget.detailModel.nodeList.length;
    return SliverListWidget.getSliverList(length, (context, index) {
      return groupItemWIdget(index);
    });
  }

  Widget groupItemWIdget(int groupIndex) {
    NodeList nodeList = widget.detailModel.nodeList[groupIndex];
    String day = "D${groupIndex + 1}";
    String city = "${nodeList.startCity} - ${nodeList.endCity}";
    String dis = '约${nodeList.distanceText}';
    bool isSow = showGroupIndex == groupIndex;
    return Container(
      width: double.infinity,
      color: MyColors.white,
      child: Column(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                if (showGroupIndex == groupIndex) {
                  showGroupIndex = -1;
                } else {
                  showGroupIndex = groupIndex;
                }
              });
            },
            child: Container(
              padding: EdgeInsets.only(left: 40.px, right: 40.px),
              width: double.infinity,
              height: 94.px,
              color: Colors.transparent,
              alignment: Alignment.centerLeft,
              child: Row(
                children: [
                  Container(
                    width: 70.px,
                    child: Text(
                      day,
                      style: TextStyle(
                          fontSize: 30.px,
                          color: MyColors.color1A1A1A,
                          fontWeight: FontWeight.w500),
                    ),
                  ),
                  Expanded(
                      child: Text(
                    city,
                    style: TextStyle(
                      fontSize: 30.px,
                      color: MyColors.color1A1A1A,
                      fontWeight: FontWeight.w500,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  )),
                  Padding(
                      padding: EdgeInsets.only(left: 10.px, right: 16.px),
                      child: Text(
                        dis,
                        style: TextStyle(
                          fontSize: 24.px,
                          color: MyColors.color999999,
                        ),
                      )),
                  BaseImage(
                    image: isSow ? 'lsgj_btn_putaway' : 'lsgj_btn_open',
                    width: 40.px,
                    height: 40.px,
                  ),
                ],
              ),
            ),
          ),
          if (isSow)
            Column(
              children: [
                for (int i = 0; i < nodeList.node.length; i++)
                  getChildItemWidget(groupIndex, i)
              ],
            ),
        ],
      ),
    );
  }

  Widget getChildItemWidget(int groupIndex, int childIndex) {
    NodeList nodeList = widget.detailModel.nodeList[groupIndex];
    Node node = nodeList.node[childIndex];
    String num = '${childIndex + 1}';
    String img = node.logo;
    String title = node.caption;
    String subTitle = node.address;
    return Container(
      padding: EdgeInsets.only(left: 25.px, right: 20.px),
      color: Colors.transparent,
      width: double.infinity,
      child: Stack(
        children: [
          Positioned(
            left: 20.px,
            top: 0,
            bottom: 0,
            child: Column(
              children: [
                Expanded(
                    child: Opacity(
                      opacity: childIndex == 0 ? 0 : 1,
                      child: DasheLine(
                        axis: Axis.vertical,
                        dashedWidth: 1,
                        dashedColor: MyColors.colorF1F1F1,
                      ),
                    )),
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(20.px)),
                  child: Container(
                    alignment: Alignment.center,
                    width: 40.px,
                    height: 40.px,
                    color: MyColors.colorF1F1F1,
                    child: Text(
                      num,
                      style: TextStyle(
                          fontSize: 22.px, color: MyColors.color666666),
                    ),
                  ),
                ),
                Expanded(
                    child: DasheLine(
                      axis: Axis.vertical,
                      dashedWidth: 1,
                      dashedColor: MyColors.colorF1F1F1,
                    )),
              ],
            ),
          ),
          Padding(padding:EdgeInsets.only(left: 60.px) , child:  Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(4.px)),
              border: Border.all(width: 1.0, color: MyColors.colorF1F1F1),
            ),
            margin: EdgeInsets.only(left: 35.px, top: 10.px, bottom: 10.px),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    if (img.isNotEmpty)
                      GestureDetector(
                        onTap: () {
                          List<String> images = node.images;
                          if (images == null || images.isEmpty) {
                            images = [];
                            images.add(img);
                          }
                          PagePushUtils.push(
                              context,
                              LineDetailImageScreen(
                                images: images,
                              ));
                        },
                        child: Padding(
                            padding: EdgeInsets.only(left: 20.px),
                            child: ImageNetworkWidget(
                              img,
                              width: 120.px,
                              height: 84.px,
                            )),
                      ),
                    Expanded(
                      child: Padding(
                        padding: EdgeInsets.only(left: 20.px),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              title,
                              style: TextStyle(
                                  fontSize: 28.px, color: MyColors.color333333),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                            SizedBox(
                              height: 8.px,
                            ),
                            Text(
                              subTitle,
                              style: TextStyle(
                                  fontSize: 24.px, color: MyColors.color999999),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        goNavi(groupIndex, childIndex);
                      },
                      child: Container(
                        width: 96.px,
                        height: 124.px,
                        color: Colors.transparent,
                        alignment: Alignment.center,
                        child: BaseImage(
                          image: 'ls_btn_nav',
                          width: 36.px,
                          height: 36.px,
                        ),
                      ),
                    )
                  ],
                ),
                if (node.description != null)
                  Padding(
                    padding:
                    EdgeInsets.only(top: 18.px, bottom: 15.px, left: 20.px),
                    child: Text(
                      node.description,
                      style: TextStyle(
                          fontSize: 24.px, color: MyColors.color666666),
                    ),
                  )
              ],
            ),
          ),)
        ],
      ),
    );
  }

  /**
   * 导航
   * **/
  void goNavi(int groupIndex, int childIndex) {
    NodeList nodeList = widget.detailModel.nodeList[groupIndex];
    Node node = nodeList.node[childIndex];
    List<String> hasMaps = MapUtils.hasMaps;
    if (hasMaps != null && hasMaps.isNotEmpty) {
      showMyBottomSheet(context, hasMaps, (index) {
        double lat = node.lat;
        double lng = node.lng;
        String caption = node.caption;
        MapUtils.naviGo(lat, lng, caption, hasMaps[index]);
      });
    }
  }
}
